<template>
  <div class="test-page">
    <h1>测试页面</h1>
    <p>当前时间: {{ currentTime }}</p>
    <p>Vue版本: {{ vueVersion }}</p>
    <p>浏览器信息: {{ userAgent }}</p>
    <div class="test-buttons">
      <button @click="testAlert">测试Alert</button>
      <button @click="testConsole">测试Console</button>
      <button @click="testLocalStorage">测试LocalStorage</button>
      <button @click="testFetch">测试Fetch</button>
    </div>
    <div class="test-results">
      <h3>测试结果:</h3>
      <pre>{{ testResults }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const currentTime = ref('')
const vueVersion = ref('')
const userAgent = ref('')
const testResults = ref('')

onMounted(() => {
  // 基本信息
  currentTime.value = new Date().toLocaleString()
  vueVersion.value = 'Vue 3.x'
  userAgent.value = navigator.userAgent
  
  testResults.value = '页面加载成功\n'
})

const testAlert = () => {
  try {
    alert('Alert测试成功')
    testResults.value += 'Alert测试成功\n'
  } catch (error) {
    testResults.value += `Alert测试失败: ${error.message}\n`
  }
}

const testConsole = () => {
  try {
    console.log('Console测试成功')
    testResults.value += 'Console测试成功\n'
  } catch (error) {
    testResults.value += `Console测试失败: ${error.message}\n`
  }
}

const testLocalStorage = () => {
  try {
    localStorage.setItem('test', 'test-value')
    const value = localStorage.getItem('test')
    localStorage.removeItem('test')
    testResults.value += `LocalStorage测试成功: ${value}\n`
  } catch (error) {
    testResults.value += `LocalStorage测试失败: ${error.message}\n`
  }
}

const testFetch = () => {
  try {
    fetch('/api/test')
      .then(response => {
        testResults.value += 'Fetch测试成功\n'
      })
      .catch(error => {
        testResults.value += `Fetch测试失败: ${error.message}\n`
      })
  } catch (error) {
    testResults.value += `Fetch测试失败: ${error.message}\n`
  }
}
</script>

<style scoped>
.test-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  margin: 10px 0;
  padding: 5px;
  background: #f5f5f5;
  border-radius: 4px;
}

.test-buttons {
  margin: 20px 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

.test-results {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}
</style> 